<template>
	<view class="price bg-white">
		<view class="text-center padding">价格明细</view>
		<view class="leixing">
			<view class="lx_l"></view>
			<view class="lx_m">面包货车</view>
			<view class="lx_l"></view>
		</view>
		<view class="mingxi">
			<view class="mess padding-bottom">
				<view>起步价</view>
				<view>5公里以内1.00元</view>
			</view>
			<view class="mess">
				<view>里程费</view>
				<view>1元</view>
			</view>
			<view class="me padding-top-sm text-gray">
				<view>里程费</view>
				<view>1元</view>
			</view>
			<view class="me padding-top-sm text-gray">
				<view>超里程费</view>
				<view>0.00元</view>
			</view>
		</view>
		<view class="money padding-top-sm">
			应付总额<span>1</span>元
		</view>
		<view class="ti padding-top-sm text-gray">*费用计算应四舍五入取小数点后两位</view>
		<view class="btn">
			<button class="cu-btn round lines-black lg" >查看计价规则</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.price{min-height: 100vh;padding: 0 30px;
	.leixing{display: flex;
		.lx_l{flex-grow: 1;height: 10px;border-bottom: 2px solid #DEDEDE;}
		.lx_m{height: 20px;line-height: 20px;padding: 0 10px;}
	}
	.mingxi{border-bottom: 2px solid #DEDEDE;padding: 30px 0;
		.mess{display: flex;justify-content: space-between;font-weight: 600;}
		.me{display: flex;justify-content: space-between;font-size: 12px;}
	}
	.money{font-weight: 600;
		span{font-size: 28px;font-weight: 100;}
	}
	.ti{font-size: 12px;}
	.btn{margin-top: 50px;text-align: center;}
}
</style>
